<template>
	<view class="container">
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">{{ title }}巡查</view>
			<view class="right"></view>
		</view>
		<!--检查列表-->
		<view v-for="(item, index) in list" :key="index" @click="toDetail(index)" class="card list flex-row">
			<view class="left">{{ index+1 }}</view>
			<view class="center" :class="{error: !item.checked}">{{ item.content }}</view>
			<view class="right">
				<uni-icons v-if="item.is_photo && !check_list[index]" type="camera" size="26" color="#5F96F2"></uni-icons>
				<image v-if="item.is_photo && check_list[index]" :src="check_list[index].split(',')[0]"></image>
				<uni-icons v-if="!item.is_photo && item.checked" type="checkbox" size="30" color="#5F96F2"></uni-icons>
				<uni-icons v-if="!item.is_photo && !item.checked" type="circle" size="30" color="#ccc"></uni-icons>
			</view>
		</view>
		
		<!--巡检情况-->
		<view class="card">
			<view class="title">
				<view class="name">巡检情况</view>
			</view>
			<view class="item">
				<textarea v-model="content" placeholder="巡检情况" />
			</view>
			<view class="title">
				<view class="name">巡检视图 <text class="require">*</text></view>
			</view>
			<view class="item" style="height: 120upx;">
				<upload @upload="uploadCheckPic" @delete="delCheckPic" :count="3"></upload>
			</view>
			<view class="title">
				<view class="name">巡检人签字 <text class="require">*</text></view>
			</view>
			<view class="item">
				<view v-if="check_sign_url" class="sign-image">
					<image :src="check_sign_url"></image>
				</view>
				<view v-else class="btns">
					<view @click="showSign('check')" class="btn">点击签字</view>
				</view>
			</view>
		</view>
		
		<!--陪同情况-->
		<view class="card">
			<view class="title">
				<view class="name">陪同视图 <text class="require">*</text></view>
			</view>
			<view class="item" style="height: 120upx;">
				<upload @upload="uploadAccomPic" @delete="delAccomPic" :count="3"></upload>
			</view>
			<view class="title">
				<view class="name">陪同人签字 <text class="require">*</text></view>
			</view>
			<view class="item">
				<view v-for="(item, index) in accom_sign_url" :key="index" class="sign-image">
					<image :src="item"></image>
				</view>
				<view class="btns">
					<view @click="showSign('accom')" class="btn">点击签字</view>
				</view>
			</view>
		</view>
		<view class="btns">
			<view @click="submit" class="btn">提交巡检数据</view>
		</view>
		<!--签名弹出-->
		<uni-popup ref="popup" type="bottom" @change="toggleSign">
			<view class="popup-outter">
				<view class="popup-inner">
					<view class="popup-title">
						<text>签名</text>
						<view @click="clearClick" class="flex-row">
							<image src="../../static/img/grid/clear.png" mode=""></image>
							<text>清除</text>
						</view>
					</view>
					<canvas
						canvas-id="firstCanvas" 
						disable-scroll='true' 
						@touchmove='move' 
						@touchstart='start($event)' 
						@touchend='end' 
						@touchcancel='cancel' 
						@longtap='tap' 
						@error='error'>
					</canvas>
					<view class="btns flex-row">
						<view @click="hideSign">返回看看</view>
						<view @click="overSign">签名</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import upload from '@/components/upload/index.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { date } from '@/common/function.js';

var content = null;
var touchs = [];
var _that;

export default{
	components: { upload,uniIcons,uniPopup },
	data(){
		return {
			id: '',
			title: '',
			list: [],
			check_list: [],
			form: {},
			content: '',
			check_pics: [],		// 巡检人视图
			accom_pics: [],		// 陪同人视图
			sign_type: '',		// 签名类型：check-巡查，accom-陪同
			check_sign_url: '',	// 巡查人签字
			accom_sign_url: []	// 陪同人签字
		}
	},
	onLoad(option){
		this.id = option.id;
		this.title = option.title;
		if(this.list.length == 0) this.getList(option.id);
		
		_that = this
		
		//获得Canvas的上下文
		content = wx.createCanvasContext('firstCanvas');
		//设置线的颜色
		content.setStrokeStyle("#000");
		//设置线的宽度
		content.setLineWidth(5);
		//设置线两端端点样式更加圆润
		content.setLineCap('round');
		//设置两条线连接处更加圆润
		content.setLineJoin('round');
	},
	onShow(){
		this.list = uni.getStorageSync('riskInspectList') || [];
		this.check_list = this.list.map(item=>item.list.pics);
	},
	onBackPress(){
		uni.removeStorageSync('riskInspectList');
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		toDetail(index){
			uni.removeStorageSync('riskInspectList');
			uni.setStorageSync('riskInspectList', this.list);
			uni.navigateTo({url: 'riskSpecialCheck?index='+index});
		},
		submit(){
			// 数据校验
			for(let i=0,l=this.list.length; i<l; i++){
				if(!this.list[i].checked){
					return uni.showToast({icon: 'none', title: '请完成所有巡检项'});
				}
			}
			if(this.check_pics.length == 0)
				return uni.showToast({icon: 'none', title: '请上传巡检视图'});
			if(!this.check_sign_url)
				return uni.showToast({icon: 'none', title: '请巡检人签字'});
			if(this.accom_pics.length == 0)
				return uni.showToast({icon: 'none', title: '请上传陪同视图'});
			if(this.accom_sign_url.length == 0)
				return uni.showToast({icon: 'none', title: '请陪同人签字'});
			
			// 处理检车列表
			let checkedList = this.list.map(item=>item.list);
			
			// 执行保存
			uni.showLoading({ title: '加载中' })
			uni.request({
				method: 'POST',
				url: this.$API.riskSpecialSubmit,
				data: {
					id: this.id,
					userid: uni.getStorageSync('userid'),
					xc_content: this.content,
					pics: this.check_pics.join(','),
					xunjian_sign: this.check_sign_url,
					peitong_pics: this.accom_pics.join(','),
					peitong_sign: this.accom_sign_url.join(','),
					list: JSON.stringify(checkedList)
				},
				header: this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					if(res.data.code == 0){
						uni.navigateBack();
					}
				},
				fail: ()=>{
					uni.hideLoading();
					uni.showToast({icon: 'none', title: '提交失败'});
				}
			})
		},
		delCheckPic(res){
			this.check_pics = this.check_pics.filter((item,idx)=>res.index != idx);
		},
		uploadCheckPic(res){
			let _this = this;
			res.temps.forEach(function(item,index){
				uni.uploadFile({
					url: _this.$API.upload,
					name: 'file',
					filePath: item,
					success: function(res) {
						let data = JSON.parse(res.data);
						_this.check_pics.push(data.fileName);
					},
					fail: function(res) {
						uni.showToast({
							title:"上传失败",
							icon:'none'
						})
					}
				});
			})
		},
		delAccomPic(res){
			this.accom_pics = this.accom_pics.filter((item,idx)=>res.index != idx);
		},
		uploadAccomPic(res){
			let _this = this;
			res.temps.forEach(function(item,index){
				uni.uploadFile({
					url: _this.$API.upload,
					name: 'file',
					filePath: item,
					success: function(res) {
						let data = JSON.parse(res.data);
						_this.accom_pics.push(data.fileName);
					},
					fail: function(res) {
						uni.showToast({
							title:"上传失败",
							icon:'none'
						})
					}
				});
			})
		},
		getList(id){
			let _this = this;
			uni.request({
				url: this.$API.riskSpecialDetail,
				data: {id},
				header: this.$API.get_head(),
				success: (res)=>{
					_this.list = res.data.data.map(item=>{
						item.checked = false;
						return item;
					});
				}
			});
		},
		// 打开签名
		showSign(type = ''){
			this.$refs.popup.open();
			this.isShowSign = true;
			this.sign_type = type;
		},
		// 关闭签名
		hideSign(){
			this.$refs.popup.close();
			this.isShowSign = false;
			this.clearClick();
		},
		// 切换弹窗
		toggleSign(e){
			this.isShowSign = e.show;
			if(!e.show) this.clearClick();
		},
		// 上传签名
		uploadSign(filePath){
			let _this = this;
			uni.showLoading({title: '上传中'});
			uni.uploadFile({
				url: _this.$API.upload,
				name: 'file',
				filePath: filePath,
				success: function(res) {
					uni.hideLoading();
					_this.hideSign();
					res.data = JSON.parse(res.data);
					let sign_url = _this.$API.baseURL + res.data.fileName;
					if(_this.sign_type == 'check') _this.check_sign_url = sign_url;
					if(_this.sign_type == 'accom') _this.accom_sign_url.push(sign_url);
					uni.showToast({
						title:"上传成功",
						icon:'none'
					});
				},
				fail: function(res) {
					uni.hideLoading();
					uni.showToast({
						title:"上传失败",
						icon:'none'
					});
				}
			});
		},
		// 签名完成
		overSign: function() {
			let _this = this;
			if (this.isEnd) {
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: function(res) {
						_this.uploadSign(res.tempFilePath);
					}
				})
			} else {
				uni.showToast({
					title: '请先完成签名',
					icon: "none",
					duration: 1500,
					mask: true
				})
			}
		
		},
		// 画布的触摸移动开始手势响应
		start: function(event) {
			//获取触摸开始的 x,y
			let point = {
				x: event.changedTouches[0].x,
				y: event.changedTouches[0].y
			}
			touchs.push(point);
		},
		// 画布的触摸移动手势响应
		move: function(e) {
			let point = {
				x: e.touches[0].x,
				y: e.touches[0].y
			}
			touchs.push(point)
			if (touchs.length >= 2) {
				this.draw(touchs)
			}
		},
		// 画布的触摸移动结束手势响应
		end: function(e) {
			// 设置为已经签名
			this.isEnd = true
			// 清空轨迹数组
			for (let i = 0; i < touchs.length; i++) {
				touchs.pop()
			}
		},
		// 画布的触摸取消响应
		cancel: function(e) {
			console.log("触摸取消" + e)
		},
		// 画布的长按手势响应
		tap: function(e) {
			console.log("长按手势" + e)
		},
		error: function(e) {
			console.log("画布触摸错误" + e)
		},
		//绘制
		draw: function(touchs) {
			let point1 = touchs[0]
			let point2 = touchs[1]
			touchs.shift()
			content.moveTo(point1.x, point1.y)
			content.lineTo(point2.x, point2.y)
			content.stroke()
			content.draw(true)
		},
		//清除操作
		clearClick: function() {
			this.isEnd = false
			
			// 获取设备宽度
			uni.getSystemInfo({
				success: function(res) {
					content.clearRect(0, 0, res.windowWidth, 200);
				}
			});
			content.draw(true)
		},
	}
}
</script>

<style scoped>
textarea{
	width: 100%;
	height: 120upx;
	font-size: 28upx;
	background: #F2F2F2;
	padding: 12upx 18upx;
	border-radius: 12upx;
	box-sizing: border-box;
}
.card{
	margin: 20upx;
	border-radius: 12upx;
	background: #fff;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view.name{
	height: 60upx;
	font-size: 32upx;
	position: relative;
}
.card .item{
	margin-bottom: 20upx;
}

.card.list{
	padding: 20upx;
}
.card>.left{
	color: #000;
	width: 70upx;
	font-size: 40upx;
	font-weight: bold;
	padding-left: 10upx;
	box-sizing: border-box;
}
.card>.right{
	width: 100upx;
	text-align: right;
	padding-right: 10upx;
	box-sizing: border-box;
}
.card>.right image{
	width: 70upx;
	height: 70upx;
	border-radius: 10upx;
}
.card>.center{
	width: calc(100% - 170upx);
	border: 4upx dotted #fff;
	box-sizing: border-box;
	border-radius: 10upx;
	line-height: 1.2;
	font-size: 28upx;
	padding: 10upx;
}
.card>.center.error{
	border: 4upx dotted red;
}

.btn{
	color: #fff;
	width: 260upx;
	height: 52upx;
	margin: 40upx auto 0;
	font-size: 30upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	background-color: red;
}
.btns .btn{
	margin: 40upx auto;
}
.sign-image{
	width: 100%;
	height: 300upx;
	margin-bottom: 20upx;
	background: #F0F0F0;
}
.sign-image image{
	width: 100% !important;
	height: 100% !important;
}
</style>
